<%@ page import="java.util.List" %>
<%@ page import="java.util.ArrayList" %>
<%@ page import="com.jxd.petMgr.model.PetOwner" %><%--
  Created by IntelliJ IDEA.
  User: 用户
  Date: 2021/11/18
  Time: 10:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%--<%@include file="loginController.jsp"%>--%>
<html>
<head>
    <title>宠物商店</title>
    <link rel="stylesheet" href="layui/css/layui.css">
    <script src="layui/layui.js"></script>
    <style>

    </style>
</head>
<body>
<%
    //       String msg = (String)request.getAttribute("msg");
//        //将cookie从本地取出全部的cookie对象，存到数组中
//        Cookie[] cookies = request.getCookies();
//        String user = "";
//        String pwd = "";
//        //从数组中找到user
//        for (Cookie cooike : cookies) {
//            if ("username".equals(cooike.getName())) {
//                //如果cookie的name为user,打印其value
//                user = cooike.getValue();
//            }
//        }
//        request.setAttribute("user",user);
//        for (Cookie cookie : cookies) {
//            if ("pwd".equals(cookie.getName())) {
//                pwd = cookie.getValue();
//            }
//        }
//    String username = (String) session.getAttribute("username");
//    String userId = (String) session.getAttribute("userId");
    PetOwner petOwner = (PetOwner) session.getAttribute("petOwner");
%>




<div class="layui-col-md6 layui-col-md-offset2" style="margin-top: 40px;margin-left: 300px">
    <h2 style="float: left">欢迎您：${petOwner.name}</h2>
    <button class="layui-btn" id="btn_inv" style="float: right;text-decoration: underline; margin-left: 20px; margin-right: 80px">注销</button>
    <h2  align="right"><a href="petOwner.jsp">我的账户</a></h2>
    <br>
    <label class="layui-form-label">价格范围</label>
    <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_min" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    -
    <div class="layui-input-inline" style="width: 100px;">
        <input type="text" name="price_max" placeholder="￥" autocomplete="off" class="layui-input">
    </div>
    <div class="layui-input-inline">
        <select name="typeName" style="width: 100px ;height: 40px">
            <option value="">请选择类型</option>
        </select>
    </div>
    <button class="layui-btn" id="btn_search">搜索</button>
    <button class="layui-btn" id="btn_reset">重置</button>
    <button class="layui-btn" id="btn_buy">购买</button>
</div>
<div class="layui-col-md4 layui-col-md-offset3" style="margin-top: 40px">
    <table class="layui-hide" id="petList"></table>
</div>


<script>
    layui.use(['form', 'layer', 'table'], function () {
        var table = layui.table;
        var form = layui.form;
        //layui中内置了jquery只需要声明$
        var $ = layui.$;
        table.render({
            id: 'petList'
            , elem: '#petList'
            , url: '/petListServlet'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {type:'numbers' , width: 61}
                ,{type: 'checkbox'}
                // , {field: 'id', width: 61, title: 'ID'}
                , {field: 'name', width: 100, title: '宠物名称'}
                , {field: 'typename', width: 100, title: '宠物种类'}
                , {field: 'price', width: 100, title: '价格' , sort: true}
                , {field: 'shopName', width: 100, title: '商店'}
            ]]
            , page: true
            , limit: 5
            , limits: [5, 10, 15]
        });


        $("input[name=price_min]").blur(function () {
          var check = /^\d+$/;
            if(!check.test($(this).val())){
                layer.msg("价格只能为数字");

            }
        });

        $("input[name=price_max]").blur(function () {
            var check = /^\d+$/;
            if(!check.test($(this).val())){
                layer.msg("价格只能为数字")
            }
        });


        //把宠物种类添加下拉列表选项
        $.ajax({
            url: "/getTypeNameServlet"
            , async: true//是否异步
            , type: "get"
            , dataType: "json"//服务器响应给浏览器的数据格式
            , success: function (list) {
                //把集合元素做成option加到
                for (var i = 0; i < list.length; i++) {
                    // list[i]
                    var $option = $("<option value='" + list[i] + "'>" + list[i] + "</option>");
                    $("select[name=typeName]").append($option)
                }
                form.render();
            }
            , error: function () {
                layer.msg("响应失败")
            }
        });

        //搜索宠物
        $("#btn_search").click(function () {
            //取搜索框的值
            var price_min = $("input[name=price_min]").val();
            var price_max = $("input[name=price_max]").val();
            var typeName = $("select[name=typeName]").val();
            //发给servlet让他模糊查询
            //重新渲染表格
            //reload的第一个参数是表格的id但不是表格标签的id
            table.reload('petList', {
                where: {
                    "price_min": price_min
                    , "price_max": price_max
                    , "typeName": typeName
                } //设定异步数据接口的额外参数
                //,height: 300
            });
        });

        //重置搜索条件
        $("#btn_reset").click(function () {
            $("input[name=price_min]").val("");
            $("input[name=price_max]").val("");
            $("select[name=typeName]").val("");
        });

        //点击购买宠物
        $("#btn_buy").click(function () {
            var checkStatus = table.checkStatus('petList'); //idTest 即为基础参数 id 对应的值
            //获取选中行的数据，是一个数组，每一个元素都是一个对象
            if(checkStatus.data.length == 0){
                layer.msg("请选择要购买的宠物")
            } else {
                //询问框
                layer.confirm('您确定要购买吗？', {
                    btn: ['确定', '取消'] //按钮
                }, function () {
                    //向servlet发送数据
                    //修改地址栏访问servlet，get提交方式
                    var pets = checkStatus.data;
                    var petIds = "";
                    for (var i in pets) {
                        if (petIds == "") {
                            //第一个选项
                            petIds = pets[i].id
                        } else {
                            //之后的选项
                            petIds = petIds + "," + pets[i].id;
                        }
                        //拼接完成
                    }
                    $.ajax({
                        url: "/buyServlet"
                        , data: {
                            "petIds": petIds
                        }
                        , dataType: "text"
                        , type: "get"
                        , async: true
                        , success: function (msg) {
                            layer.msg(msg);
                            //刷新表格
                            table.reload("petList")
                        }
                        , error: function () {
                            layer.msg("响应失败")
                        }
                    })
                })
            }
        });

        //注销
        $("#btn_inv").click(function () {
            window.location.href = "inv.jsp"
        })
    })
</script>
</body>
</html>
